function EditPurchaseGui(prefix, container, item, options) {
  this._prefix = prefix;
  this._container = container;
  this._item = item;

  this._designs = (options && options.designs) ? options.designs : [];
  this._samples = (options && options.samples) ? options.samples : [];
  
  this._createElements();
};

EditPurchaseGui.prototype._createElements = function() {
  var div, table, mtr, mtd, input, select;
  
  var top = document.createElement('table');
  top.style.backgroundImage = 'url(images/pageasst/pagebackendpackage/attrtop.png)';
  top.style.backgroundRepeat = 'no-repeat';
  top.style.width = '754px';
  top.style.height = '15px';
  this._container.appendChild(top);
  
  var middle = document.createElement('table');
  middle.style.backgroundImage = 'url(images/pageasst/pagebackendpackage/attrmiddle.png)';
  middle.style.backgroundRepeat = 'repeat-y';
  middle.style.width = '754px';
  this._container.appendChild(middle);
  
  mtr = middle.insertRow(-1);
  mtd = mtr.insertCell(-1);
  mtd.style.width = '50px';
  mtd.style.textAlign = 'center';
  mtd.style.verticalAlign = 'top';
  var attr = document.createElement('img');
  attr.src = 'images/pageasst/pagebackendpackage/attribute.png';
  attr.style.margin = '0 18px 0 0';
  mtd.appendChild(attr);
  mtd = mtr.insertCell(-1);
  var topTable = document.createElement('table');
  topTable.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/largetop.png)';
  topTable.style.backgroundRepeat = 'no-repeat';
  topTable.style.width = '672px';
  topTable.style.height = '10px';
  mtd.appendChild(topTable);
  
  
  var table = document.createElement('table');
  table.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/largemiddle.png)';
  table.style.backgroundRepeat = 'repeat-y';
  table.style.width = '672px';
  mtd.appendChild(table);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.align = 'center';
  td.style.verticalAlign = 'middle';
  td.colSpan = 12;
  var itable = document.createElement('table');
  itable.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/addproductbg.png)';
  itable.style.backgroundRepeat = 'no-repeat';
  itable.style.width = '642px';
  itable.style.height = '48px';
  td.appendChild(itable);
  var itr = itable.insertRow(-1);
  var itd = itr.insertCell(-1);
  itd.align = 'right';
  itd.style.verticalAlign = 'middle';
  var img = document.createElement('img');
  img.src = 'images/pageasst/pagebackendpackages/product.png';
  img.style.margin = '0 0 0 20px';
  itd.appendChild(img);
  
  itd = itr.insertCell(-1);
  itd.align = 'center';
  itd.style.verticalAlign = 'middle';
  select = document.createElement('select');
  select.style.width = '150px';
  select.style.border = 'solid 1px #999';
  select.style.margin = '0 0 0 10px';
  select.id = this._prefix + 'product';
  for (var i = 0, il = this._samples.length; i < il; i++) {
    var sample = this._samples[i];
    option = new Option(sample.name);
    select.options[select.options.length] = option;
    if (this._item.product && sample.id == this._item.product.sampleId) {
      select.selectedIndex = i;
    }
  }
  itd.appendChild(select);
  
  itd = itr.insertCell(-1);
  itd.align = 'right';
  itd.style.verticalAlign = 'middle';
  var img = document.createElement('img');
  img.src = 'images/pageasst/pagebackendpackages/quantity.png';
  img.style.margin = '5px 0 0 20px';
  itd.appendChild(img);
  itd = itr.insertCell(-1);
  input = DOMUtils.createInput(null, null, 'text', this._item.quantity, null);
  input.id = this._prefix + 'quantity';
  input.style.margin = '0 0 0 10px';
  input.style.width = '100px';
  input.style.border = 'solid 1px #999';
  input.style.textAlign = 'center';
  itd.appendChild(input);
  
  itd = itr.insertCell(-1);
  itd.align = 'right';
  itd.style.verticalAlign = 'middle';
  itd.style.padding = '0 0 0 10px';
  itd.appendChild(document.createTextNode('Price:'));
  itd = itr.insertCell(-1);
  input = DOMUtils.createInput(null, null, 'text', this._item.price, null);
  input.id = this._prefix + 'price';
  input.style.margin = '0 0 0 10px';
  input.style.width = '100px';
  input.style.border = 'solid 1px #999';
  input.style.textAlign = 'center';
  itd.appendChild(input);
  
  itd = itr.insertCell(-1);
  itd.style.width = '50px';
  itd.align = 'center';
  itd.style.verticalAlign = 'middle';
  var del = document.createElement('img');
  del.src = 'images/pageasst/pagebackendpackage/delete.png';
  del.style.cursor = 'pointer';
  del.id = this._prefix + 'btnDel';
  itd.appendChild(del);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.align = 'left';
  this._attributeTable = document.createElement('table');
  this._attributeTable.cellPadding = 0;
  this._attributeTable.cellSpacing = 0;
  this._attributeTable.style.width = '612px';
  this._attributeTable.style.margin = '0 0 0 11px';
  this._attributeTable.id = this._prefix + 'attribute';
  td.appendChild(this._attributeTable);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.align = 'left';
  this._designTable = document.createElement('table');
  this._designTable.cellPadding = 0;
  this._designTable.cellSpacing = 0;
  this._designTable.style.width = '612px';
  this._designTable.style.margin = '0 0 0 11px';
  this._designTable.id = this._prefix + 'design';
  td.appendChild(this._designTable);

  if (this._item.product) {
    this._displayAttributes();
    if (this._item.product.type == '{{$smarty.const.SAMPLE_TYPE_ALBUM|escape:javascript}}' || this._item.product.type == '{{$smarty.const.SAMPLE_TYPE_MAGAZINE_ALBUM|escape:javascript}}') {
      this._displayDesigns();
    }
  }
  
  var bottomTable = document.createElement('table');
  bottomTable.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/largebottom.png)';
  bottomTable.style.backgroundRepeat = 'no-repeat';
  bottomTable.style.width = '672px';
  bottomTable.style.height = '10px';
  mtd.appendChild(bottomTable);
  
  var bottom = document.createElement('table');
  bottom.style.backgroundImage = 'url(images/pageasst/pagebackendpackage/attrbottom.png)';
  bottom.style.backgroundRepeat = 'no-repeat';
  bottom.style.width = '754px';
  bottom.style.height = '15px';
  this._container.appendChild(bottom);
};

EditPurchaseGui.prototype._displayAttributes = function() {
  while (this._attributeTable.rows.length > 0) {
    this._attributeTable.deleteRow(0);
  }
  this._attributeTable.border = 0;
  var sample = DlmanageUtils.sample(this._item.product, this._samples);
  for (var i = 0, il = sample.attributes.length; i < il; i++) {
    var attribute = sample.attributes[i];
    tr = this._attributeTable.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.width = '80px';
    td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrleftbg.png)';
    td.style.backgroundRepeat = 'no-repeat';
    td.style.height = '32px';
    td.align = 'right';
    var span = document.createElement('span');
    span.style.color = '#000';
    span.style.fontSize = '13px';
    span.style.fontFamily = 'Tahoma';
    span.style.fontWeight = 'bold';
    span.style.margin = '0 5px 0 0';
    span.appendChild(document.createTextNode(attribute.name + ': '));
    td.appendChild(span);

    for (var j = 0, jl = attribute.options.length; j < jl; j++) {
      var option = attribute.options[j];
      td = tr.insertCell(-1);
      td.style.width = '1px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var line = document.createElement('img');
      line.src = 'images/pageasst/pagebackendpackages/line.png';
      td.appendChild(line);
      td = tr.insertCell(-1);
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrmiddlebg.png)';
      td.style.backgroundRepeat = 'no-repeat';
      td.style.height = '32px';
      td.style.width = '50px';
      td.style.cursor = 'pointer';
      td.style.color = '#009933';
      td.style.fontSize = '12px';
      td.style.fontFamily = 'Tahoma';
      td.align = 'center';
      td.id = this._prefix + '_' + i + '_' + j + 'optionTd';
      for (var k = 0, kl = this._item.product.selects.length; k < kl; k++) {
        var select = this._item.product.selects[k];
        if (select.sampleAttributeOptionId == option.id) {
          td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/hilight.png)';
          td.style.backgroundRepeat = 'no-repeat';
        }
      }
      td.appendChild(document.createTextNode(option.name));
    }
    
    if (attribute.name == '膜' || attribute.name == '封面') {
      td = tr.insertCell(-1);
      td.colSpan = 24;
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrmiddlebg.png)';
      td.style.backgroundRepeat = 'repeat-x';
    } else if (attribute.name == '形状' && attribute.options.length == 1) {
      td = tr.insertCell(-1);
      td.colSpan = 24;
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrmiddlebg.png)';
      td.style.backgroundRepeat = 'repeat-x';
    } else if (attribute.name == '形状' && attribute.options.length == 2) {
      td = tr.insertCell(-1);
      td.colSpan = 20;
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrmiddlebg.png)';
      td.style.backgroundRepeat = 'repeat-x';
    } else if (attribute.name == 'Pages') {
      td = tr.insertCell(-1);
      td.colSpan = 4;
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrmiddlebg.png)';
      td.style.backgroundRepeat = 'repeat-x';
    }
    td = tr.insertCell(-1);
    td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/attrrightbg.png)';
    td.style.backgroundRepeat = 'no-repeat';
  }
};

EditPurchaseGui.prototype._displayDesigns = function() {
  var btn, radio;
  
  while (this._designTable.rows.length > 0) {
    this._designTable.deleteRow(0);
  }
  
  tr = this._designTable.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.width = '612px';
  td.style.height = '10px';
  td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/top.png)';
  td.style.backgroundRepeat = 'no-repeat';
  
  if (this._designs[this._item.product.designId]) {
    if (this._designs[this._item.product.designId].length > 1) {
      tr = this._designTable.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/middle.png)';
      td.style.backgroundRepeat = 'repeat-y';
      td.style.height = '20px';
      td.style.width = '612px';
      btn = document.createElement('img');
      btn.src = 'images/pageasst/pagebackendpackages/individualdesign.png';
      btn.style.margin = '0 0 0 10px';
      btn.id = this._prefix + 'btnDesign';
      td.appendChild(btn);
      
      tr = this._designTable.insertRow(-1);
      td = tr.insertCell(-1);
    }
    
    for (var designId in this._designs) {
      var other = DlmanageUtils.design(this._designs[designId]);
      var self = DlmanageUtils.design([this._item]);
      
      if (other.page < self.page || other.shape != self.shape) {
        continue;
      }
      
      tr = this._designTable.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/middle.png)';
      td.style.backgroundRepeat = 'repeat-y';
      td.style.height = '20px';
      td.style.width = '612px';
      td.style.fontSize = '12px';
      td.style.fontFamily = 'Tahoma';
      td.style.color = (designId == this._item.product.designId) ? '#009933' : '#000000';
      radio = DOMUtils.createInput('DESIGN' + this._prefix, null, 'radio', null, null);
      radio.style.margin = '0 0 0 10px';
      radio.checked = (designId == this._item.product.designId);
      radio.id = this._prefix + designId + 'radioDesign';
      td.appendChild(radio);
      
      if (designId == this._item.product.designId) {
        td.appendChild(document.createTextNode((this._designs[designId].length == 1) ? '独立设计' : '公用设计 (' + other.description + ')'));
      } else {
        td.appendChild(document.createTextNode('设计 (' + other.description + ')'));
      }
    }
    tr = this._designTable.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.width = '612px';
    td.style.height = '10px';
    td.style.backgroundImage = 'url(images/pageasst/pagebackendpackages/bottom.png)';
    td.style.backgroundRepeat = 'no-repeat';
  }
};